<template>
  <div>
    <el-card class="header-card-box">
      <div class="header">
        <Describe :describe="values" />
        <div class="action">
          <span>
            <el-button type="primary"
                       @click="handerBarga">提交</el-button>
          </span>
          <span class="cancel">
            <el-button plain
                       @click="cancel">取消</el-button>
          </span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import quotationApi from "@service/modules/quotation";
import Describe from './Describe.vue'
import { mapState, mapActions } from "vuex";
import { interceptRules } from '../corePage/index'

export default {
  name: 'DickerPriceHeader',
  components: { Describe },
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    templateId: {
      type: [String, Number],
      default: null
    }
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      /* 当前议价数据 */
      bargaWhole: (state) => state.quotation.bargaWhole,
      bargaPick: (state) => state.quotation.bargaPick,
      bargaDeliver: (state) => state.quotation.bargaDeliver,
      bargaLoad: (state) => state.quotation.bargaLoad,
      bargaUnload: (state) => state.quotation.bargaUnload,
      bargaDivide: (state) => state.quotation.bargaDivide,
      /* 分割线 */
      whole: (state) => state.quotation.whole,
      pick: (state) => state.quotation.pick,
      deliver: (state) => state.quotation.deliver,
      load: (state) => state.quotation.load,
      unload: (state) => state.quotation.unload,
      other: (state) => state.quotation.other,
      divide: (state) => state.quotation.divide
    }),
    values () {
      return this.value
    },
    rules () {
      return {
        whole: this.bargaWhole,
        pick: this.bargaPick,
        deliver: this.bargaDeliver,
        load: this.bargaLoad,
        unload: this.bargaUnload,
        divide: this.bargaDivide
      }
    },
    lowerRules () {
      return {
        whole: this.whole,
        pick: this.pick,
        deliver: this.deliver,
        load: this.load,
        unload: this.unload,
        divide: this.divide
      }
    },
    isLowerGetBargain () {
      return this.values.templateId && this.values.status
    }
  },
  methods: {
    ...mapActions({
      clearBarga: "quotation/clearBarga"
    }),
    cancel () {
      if (!this.values.templateId) {
        this.$emit('canceBarga')
      }
      this.$router.go(-1)
    },
    handerBarga () {
      this.submitForm()
    },
    submitForm () {
      if (this.isLowerGetBargain) {
        let data = { rules: this.lowerRules, ...this.values }
        const isRules = interceptRules(this.lowerRules)
        if (isRules) {
          if (data?.customerId) {
            this.getCustomerSubmit({ data: data })
          } else {
            this.getCarrierSubmit({ data: data })
          }
        }
      } else {
        this.$prompt("", '议价理由', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputType: "textarea",
          inputPattern: /^.{1,200}$/,
          inputPlaceholder: `请输入议价理由`,
          inputErrorMessage: `议价理由不能为空,且不能超过200个字符`
        })
          .then(({ value }) => {
            let data = { reason: value, templateId: this.templateId, rules: this.rules }
            this.getBargain({ data })
          })
          .catch(() => { });
      }
    },
    /* 上游提交 */
    async getBargain ({ data }) {
      let response = await quotationApi.getBargain(data)
      if (response.code === 0) {
        this.clearBarga()
        this.$message.success('操作成功')
        this.$router.go(-2)
      }
    },
    /* 承运方 */
    async getCarrierSubmit ({ data }) {
      let response = await quotationApi.carrierSubmit(data)
      if (response.code === 0) {
        this.$message.success('操作成功')
        this.$router.go(-2)
      }
    },
    // 发货方
    async getCustomerSubmit ({ data }) {
      let response = await quotationApi.customerSubmit(data)
      if (response.code === 0) {
        this.$message.success('操作成功')
        this.$router.go(-2)
      }
    }
  }
}
</script>

<style scoped>
.header {
  height: 32px;
  line-height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-dropdown {
  /* padding: 0 10px; */
  padding-left: 10px;
}
.action {
  /* display: flex; */
  width: 30%;
  text-align: end;
}
.cancel {
  padding-left: 10px;
}
</style>